<template>
  <el-card class="print-wrap">
    <template #header>
      <div class="print-btns">
        <div class="print-paperTypes">打印模板</div>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </template>
    <div class="print-view">
      <div class="hiprint-printTemplate"></div>
      <div
        id="PrintElementOptionSetting"
        class="PrintElementOptionSetting"
      ></div>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import { useRoute } from "vue-router";
import panelFunc from "./panel.js";

const hiprintTemplate = ref();
const route = useRoute();
const templates = ref(
  route.query?.labelCodes ? JSON.parse(route.query?.labelCodes) : []
);
// 当前纸张
const curPaper = ref({
  type: "A4",
  width: 210,
  height: 296.6,
});

// 纸张类型
const paperTypes = ref([
  {
    type: "A3",
    width: 420,
    height: 296.6,
  },
  {
    type: "A4",
    width: 210,
    height: 296.6,
  },
  {
    type: "A5",
    width: 210,
    height: 147.6,
  },
  {
    type: "B3",
    width: 500,
    height: 352.6,
  },
  {
    type: "B4",
    width: 250,
    height: 352.6,
  },
  {
    type: "B5",
    width: 250,
    height: 175.6,
  },
]);

const buildDesigner = (panel) => {
  // 初始化可拖拽的元素
  hiprint.init({
    providers: [new defaultElementTypeProvider()],
  });
  hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));

  hiprintTemplate.value = new hiprint.PrintTemplate({
    template: panel, // 模板json
    // pageBreak: true,
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    paginationContainer: ".hiprint-printPagination", // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/>
  });
  // // 设计器的容器
  hiprintTemplate.value.design(".hiprint-printTemplate", {
    grid: true,
  });
};

function print() {
  const options = { leftOffset: -1, topOffset: -1 };
  const printData = [];
  // 打印数据，key 对应 元素的 字段名
  // 参数: 打印时设置 左偏移量，上偏移量
  templates.value.forEach((ele, idx) => {
    printData.push({
      qrcodeData: String(import.meta.env.VITE_APP_H5_CODE_API + ele),
      qrcodeText: String(ele),
      // count: String(idx + 1),
    });
  });
  hiprintTemplate.value.print(printData, options);
}
onMounted(() => {
  setTimeout(() => {
    const panel = panelFunc(templates.value[0]);
    buildDesigner(panel);
  }, 500);
});
</script>
<style lang="scss" scoped>
.print-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}
:deep(.el-card__header) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.print-btns {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}
:deep(.el-card__body) {
  overflow-y: auto;
}
.print-view {
  display: flex;
  padding: 20px;
  justify-content: center;
  background-color: #ffffff;
  flex: 1;
  overflow-y: auto;
}
.hiprint-printTemplate {
  margin-right: 20px;
}
.PrintElementOptionSetting {
  max-width: 300px;
  flex-shrink: 0;
}
.print-paperTypes {
  display: flex;
  align-items: center;
}
</style>
